<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>终极目标</title>
    <script  src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>

<form>
    <table width="350" bgcolor="#ccffcc" style="border-color" border="1">
        <tr align=center>
            <td>横轴</td><td><input type="text" name="lat" id="lat" value="30.215328"></td>
        </tr>
        <tr align=center><td>纵轴</td><td><input type="text" name="lng" id="lng" value="120.227711"></td></tr>
        <tr align=center><td colspan="2"><input type="button" value="生成" onclick="r();"/>   <input type="reset" value="重 置"/></td></tr>
    </table>
</form>
<div>
    <table id="myTb" border="1">
        <tr>
            <th>标题</th>
            <th>房间面积</th>
            <th>到公司的距离(Km)</th>
            <th>房间租金(元)</th>
            <th>房间关联系数</th>
            <th>地址</th>
        </tr>
        <!--<tr>-->
            <!--<td></td>-->
            <!--<td></td>-->
            <!--<td></td>-->
            <!--<td></td>-->
            <!--<td></td>-->
        <!--</tr>-->

    </table>
</div>
<script type="text/javascript">
    function r()
    {
        var lats=document.getElementById("lat").valueOf();
        var lngs=document.getElementById("lng").valueOf();
        if(lat.value=="")
        {
            alert("请输入横坐标");
            return;
        }
        if(lng.value=="")
        {
            alert("请输入纵坐标");
            return;
        }
        $.get("http://localhost:8080/ziroom/message",{lat:lats.value,lng:lngs.value}, function (res) {
            console.log(res.data);
            var item = res.data;
            var tbBody="";
            for (var i = 0; i < 20; i++) {
                tbBody += "<tr> <td>" + item[i].title + "</td>" + "<td>" + item[i].area + "</td>" + "<td>" + (item[i].coDistance/1000).toFixed(2) + "</td>" + "<td>" + item[i].price + "</td>"+ "<td>" + item[i].relevance.toFixed(5) + "</td>" + "<td> <a href=\""+ item[i].link + "\">"+item[i].link+"</a></td>" +"</tr>";
            }
            $("#myTb").append(tbBody);
        });
    }



</script>

</body>
</html>